<!--  -->
<template>
  <div class="hot">
    <span
      class="hot_a"
      ref="targetNav"
      :class="index==0?'select':''"
      @click.self="hot($event,item)"
      v-for="(item,index) in data"
      :key="item.name"
    >
      <span class="line" v-if="index!=0"></span>
      {{item.name}}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["data"],
  watch: {
    data() {
      this.removeSiblings();
    }
  },
  components: {},
  computed: {},
  mounted() {},
  methods: {
    //点击加选中色
    hot(event, item) {
      console.log("=====", item);

      let anchor = document.querySelector("#" + item.name);
      window.scrollTo(0, anchor.offsetTop - 121);
      this.removeSiblings();
      event.target.classList.add("select");
    }, //删除所有select
    removeSiblings() {
      for (var i = 0; i < this.$refs.targetNav.length; i++) {
        this.$refs.targetNav[i].classList.remove("select");
      }
    }
  }
};
</script>
<style lang='scss' scoped>
</style>